<template>
	<view class="ListOfPatients">
		<view class="ListOfPatients_All">
			<view class="ListOfPatients_AllList">
				<Head></Head>
				<view class="ListOfPatients_TP">
					<u-radio-group v-if="activeList" v-model="value" placement="row" activeColor="#7AD9DF !important"
						inactiveColor="#B0E9EC  !important">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index"
							:label="item.name" :name="item.name" @change="radioChange(item.name)"
							:class="value==item.name?'clao':'clat'">
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="ListOfPatients_BT">
				<view class="ListOfPatientsBT_itemTwo" v-for="(item,index) in list" :key="index"
					style="margin-bottom: 10px;" @tap="getList(item)">
					<view class="ListOfPatientsBT_itemTwo_left">
						<text style="margin-left: 10px;" :title="item.repdate">{{item.checkitem }}</text>
					</view>
					<view class="ListOfPatientsBT_itemTwo_right">
						<view class="ListOfPatientsBT_itemTwo_rightSJ">
							{{item.repdate}}
						</view>
						<image class="ZXImg" src="../../assets/image/sjd.png"></image>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-if="shows" :show="show" mode="center" @close="close" @touchmove.stop.prevent="moveHandle">
			<view class="diglog">
				<view class="diglog-misa">
					<view class="diglog_title" style=" word-break: break-all;" v-if="checkitem.length > 20">
						{{checkitem}}
					</view>
					<view class="diglog_title" style="text-align: center;line-height: 45px;" v-else>
						{{checkitem}}
					</view>
					<view class="xian"></view>
				</view>
				<view class="diglog_center">
					<view class="diglog_item" v-for="(item,index) in labObj" :key="index">
						<image class="NXImg" src="../../assets/image/nixie.svg"></image>
						<view class="diglog_item_title">
							<view class="rideo">{{item.iflag}}</view>
							<text v-html="item.testname">{{item.testname}}</text>
						</view>
						<view class="diglog_item_centent">
							<text
								style="flex: 1;text-align: center;line-height: 36px;color:#086168;">{{item.result}}</text>
							<text style="flex: 1;text-align: center;line-height: 36px;">{{item.unit}}</text>
							<text
								style="flex: 2;text-align: center;line-height: 36px;color:#086168;">{{item.ckfw}}</text>
						</view>
					</view>
					<view class="button" @tap="show=false">取消</view>
				</view>
			</view>
		</u-popup>
		<report v-else :show2="shows1" :reportList="reportList" :checkitem="checkitem" @reportShow="reportShow">
		</report>
		<suspension-ball :isShow="false" @tap.native="jampBall"></suspension-ball>
	</view>
</template>

<script>
	import Select from './selevt.vue'
	import Head from '../../components/html/head.vue'
	import report from './report.vue'
	import suspensionBall from '../../components/html/xuanfuqiu.vue'
	import {
		Lis_Data_Get,
		Lis_DataDetail_Get
	} from '../../api/user.js'
	import {
		mapMutations,
		mapState
	} from "vuex";
	export default {
		components: {
			Select,
			report,
			Head,
			suspensionBall
		},
		data() {
			return {
				form: {
					name: '',
				},
				radiolist1: [{
						name: '当前数据',
						disabled: false
					},
					{
						name: '归档数据',
						disabled: false
					}
				],

				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '当前数据',
				TabList: '',
				activeList: true,
				activeTwoList: false,
				show: false,
				list: [],
				user: {},
				obj: {},
				labObj: {},
				shows: false,
				shows1: false,
				reportList: [],
				checkitem: ''
			};
		},
		watch: {
			deleteObj: {
				// deep: true,
				handler(newval, oldval) {
					// console.log(newval, oldval,'newval, oldval');
					if (newval.MRN != oldval.MRN) {
						this.Lis_Data_GetFun()
					}

				},
			}
		},
		computed: {
			...mapState('user', ["userInfo", "deleteObj"]),
		},
		mounted() {
			this.Lis_Data_GetFun()
		},
		filters: {
			//文字数超出时，超出部分使用...
			ellipsis(value) {
				if (!value) return ''
				if (value.length > 10) {
					return value.slice(0, 10) + '...'
				}
				return value
			}
		},
		methods: {
			getList(data) {
				this.checkitem = data.checkitem
				this.Lis_DataDetail_GetFun(data)
			},
			moveHandle() {},
			jampBall() {
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
			close() {
				this.show = false
				// console.log('close');
			},
			radioChange(e) {
				this.value = e
				this.Lis_Data_GetFun()
			},
			async Lis_Data_GetFun() {
				//滚动回到顶部
				uni.pageScrollTo({
					scrollTop: 0,
				});
				try {
					uni.showToast({
						title: '加载中...', //显示的文字
						duration: 5000, //显示多少时间，默认1500毫秒
						icon: "loading", //自定义显示的图标，默认成功success，错误error,加载loading，不显示图标是none
						mask: true
					})
					this.user = uni.getStorageSync('userInfo')
					this.obj = uni.getStorageSync('deleteObj')
					const data = {
						HosKind: this.user.hoscode,
						mrn: this.obj.MRN,
						kind: this.value
					}
					
					const res = await this.$http.Lis_Data_Get(data)
					if (res) {
						this.list = res
						this.$nextTick(async () => {
							await uni.hideToast();
						})
					}
				} catch (e) {
					console.log(e);
				}
			},
			async Lis_DataDetail_GetFun(e) {
				try {
					uni.showToast({
						title: '加载中...', //显示的文字
						// duration: 5000, //显示多少时间，默认1500毫秒
						icon: "loading", //自定义显示的图标，默认成功success，错误error,加载loading，不显示图标是none
						mask: true
					})
					const data = {
						HosKind: this.user.hoscode,
						mrn: this.obj.MRN,
						rType: e.reptype,
						rRdn: e.repo,
						specimenid: e.LabelCode,
						dodate: e.reportnotes,
						domany: e.repo,
					}
					const res = await this.$http.Lis_DataDetail_Get(data)
					if (res) {
						this.shows = e.reptype == 'LAB' ? true : false
						this.show = this.shows
						this.shows1 = !this.shows
						if (e.reptype == 'LAB') {
							this.labObj = res
							await uni.hideToast();
						} else {
							this.reportList = res[0].result.split('  ')
							await uni.hideToast();
						}
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
			reportShow(value) {
				this.shows1 = value
			},
		}
	};
</script>

<style scoped lang="scss">
	.ListOfPatients {
		width: 100%;
		height: 100%;
		background: #F9F9F9;
		position: relative;

		.ListOfPatients_All {
			background: #F9F9F9;
			width: 100%;
			min-height: 100%;
			position: absolute;
			top: 0;
			left: 0;

			.ListOfPatients_AllList {
				width: 100%;
				position: fixed;
				top: 0;
				z-index: 99;
			}
		}

		.ListOfPatients_TP {
			padding: 10px 0px 0px 0px;
			background: #FFFFFF;
			// display: flex;
			// justify-content: space-between;
		}

		.ListOfPatients_BT {
			// width: 100%;
			height: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			padding: 10px 10px;
			padding-bottom: 0px;
			margin-top: 158px;

			.ListOfPatientsBT_item {
				width: 355px;
				min-height: 50px;
				background: #B0E9EC;
				border-radius: 6px;
				padding-bottom: 17px;
				position: relative;


				.ListOfPatientsBTItem_text {
					font-size: 16px;
					font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					font-weight: 500;
					color: #FF4D65;
					line-height: 24px;
				}

				.ListOfPatientsBTItem_textT {
					font-size: 16px;
					font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					font-weight: 500;
					color: #333333;
					line-height: 24px;
				}

				.ListOfPatientsBTItem_Right {
					width: 164px;
					height: 30px;
					// background: #FFFFCF ;
					// border-bottom-left-radius: 404rpx;
					// background-image: url("../../assets/image/sjd.png");
					// background-size: 104% 115%;
					// background-repeat: no-repeat;
					text-align: right;
					line-height: 30px;
					z-index: 1;
				}

				.Iage {
					width: 54% !important;
					height: 42% !important;
					position: absolute;
					top: 0;
					right: 0;
					background-size: auto !important;
					background-position: 100% 0% !important;
				}
			}

			.ListOfPatientsBT_itemTwo {
				width: 100%;
				min-height: 50px;
				background: #B0E9EC;
				border-radius: 6px;
				position: relative;
				display: flex;
				justify-content: space-between;

				.ListOfPatientsBT_itemTwo_left {
					width: 185px;
					min-height: 50px;
				  align-items: center;
					display: flex;
				}

				.ListOfPatientsBT_itemTwo_right {
					.ListOfPatientsBT_itemTwo_rightSJ {
						position: absolute;
						top: 4px;
						right: 0;
						width: 161px;
						height: 30px;
						z-index: 1;
					}

					.ZXImg {
						position: absolute;
						top: 0;
						right: 0;
						width: 182px !important;
						height: 40px !important;
					}
				}
			}

			.ListOfPatientsBT_center {
				width: 343px;
				background: #F6FEFF;
				border-radius: 6px;
				opacity: 0.95;
				margin: -9px 6px;
			}
		}
	}

	::v-deep .u-form-item__body__right__content__slot {
		justify-content: space-between;
	}

	::v-deep .u-form-item__body {
		padding: 0px 5px;
		margin-bottom: 15px;
	}

	::v-deep .u-border {
		border: none;
		background: #F6FEFF;
	}

	::v-deep .u-checkbox__icon-wrap--square {
		background: #CAF0F3 !important;
		border-radius: 2px !important;
		border: 2px solid #7AD9DF !important;
	}

	::v-deep .uni-scroll-view-content {
		width: 100% !important;
	}

	::v-deep .u-tabs__wrapper__nav__line {
		background: #7AD9DF;
	}

	::v-deep .Iage div {
		background-size: auto !important;
		background-position: 100% 0% !important;
	}

	::v-deep .u-radio-group--row {
		justify-content: space-around;
	}

	::v-deep .u-radio__icon-wrap--circle {
		width: 26px !important;
		height: 26px !important;
		background-color: #B0E9EC !important;
		// border-color:  #7AD9DF  !important;
	}

	::v-deep .u-icon__icon {
		// border-radius: 50%;
		// background: #FEFF87;
	}

	::v-deep .u-radio-label--undefined {
		// background-color: #FFFFFF !important;
		// border-color:  #B0E9EC  !important;
	}

	.clao ::v-deep {
		.u-icon__icon {
			border-radius: 50%;
			background: #FEFF87;
			color: #FEFF87 !important;
			width: 13px;
			height: 13px;
		}
	}

	.clat ::v-deep {
		.u-icon__icon {
			border-radius: 50%;
			background: #FFFFFF;
			width: 13px;
			height: 13px;
		}
	}

	::v-deep uni-page-wrapper {
		background: #F9F9F9 !important;
	}

	::v-deep .u-radio-group--row {
		margin-top: 10px;
	}

	.diglog {
		width: 300px;
		height: 500px;
		background: #FFFFFF;
		border-radius: 4px;
		overflow: hidden;
		position: relative;

		.diglog-misa {
			height: 50px;
		}

		.diglog_title {
			// width: 100%;
			height: 45px;
			// border-bottom: 1px solid #7AD9DF;
			// text-align: center;
			// line-height: 45px;
			font-size: 18px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 700;
			color: #333333;
			padding: 0 6px;
			text-overflow: ellipsis;
			overflow: hidden;
		}

		.xian {
			position: absolute;
			width: 100%;
			height: 2rpx;
			background: #7AD9DF;
			left: 0;
			top: 50px;
			z-index: 9;
			// opacity: 0.19;
			// opacity: 0.19;
			// margin: 14rpx 0;
		}

		.diglog_center {
			// height: 535px;
			height: 75%;
			padding: 10px 10px;
			padding-bottom: 0px;
			overflow: hidden;
			overflow-y: scroll;

			.button {
				width: 93%;
				height: 40px;
				background: #FF6E91;
				box-shadow: 0px 2px 6px 0px #FF6E91;
				border-radius: 6px;
				font-size: 18px;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 40px;
				letter-spacing: 14px;
				text-align: center;
				position: absolute;
				bottom: 10px;
			}

			.diglog_item {
				// width: 305px;
				min-height: 58px;
				background: #B0E9EC;
				border-radius: 6px;
				position: relative;
				padding: 6px 6px;
				margin-bottom: 10px;

				.diglog_item_title {
					display: flex;
					line-height: 15px;
				}

				.diglog_item_centent {
					min-height: 36px;
					background: #F6FEFF;
					border-radius: 6px;
					opacity: 0.95;
					display: flex;
				}

				.NXImg {
					width: 60px;
					height: 29px;
					position: absolute;
					top: 0;
					right: 0;
				}

				.rideo {
					width: 18px;
					height: 18px;
					background: #CAF0F3;
					border-radius: 10px;
					border: 2px solid #7AD9DF;
					position: relative;
					top: -2px;
					margin-right: 10px;
				}
			}
		}
	}
</style>
